import React from "react";
import { Card, Row, Col, Modal } from "antd";
import "./index.less";

interface IProp {}
interface IState {
	visible: boolean;
	currentImgName: string;
}

class UIGallery extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {
			visible: false,
			currentImgName: ""
		};
	}

	showImg = (imgName: string) => {
		this.setState({
			visible: true,
			currentImgName: imgName
		});
	};

	render() {
		const imgs: Array<Array<string>> = [
			["cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg"],
			["cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg"],
			["cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg"],
			["cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg"],
			["cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg"],
			["cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg"],
			["cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg", "cat.jpg"]
		];

		const imgLists = imgs.map(listRows =>
			listRows.map((imgName, index) => (
				<div key={index}>
					<Card cover={<img src={`/imgs/gallery/${imgName}`} onClick={() => this.showImg(imgName)} />}>
						<Card.Meta title="gallery demo" description="I like cat"></Card.Meta>
					</Card>
				</div>
			))
		);

		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>UI Gallery</h1>
				</div>

				<Card title="图片画廊" className="button-wrap">
					<Row gutter={10}>
						<Col md={4}>{imgLists[0]}</Col>
						<Col md={4}>{imgLists[1]}</Col>
						<Col md={4}>{imgLists[2]}</Col>
						<Col md={4}>{imgLists[3]}</Col>
						<Col md={4}>{imgLists[4]}</Col>
						<Col md={4}>{imgLists[5]}</Col>
					</Row>
				</Card>
				<Modal
					title="Detail Photo"
					width={400}
					visible={this.state.visible}
					onCancel={(): void => {
						this.setState({
							visible: false
						});
					}}
					footer={null}
				>
					<img src={`/imgs/gallery/${this.state.currentImgName}`} style={{ width: "100%" }} />
				</Modal>
			</div>
		);
	}
}

export default UIGallery;

// create-react-app 加载图片

// 方法1
// import icon1 from '../images/login-from-icon1.png';
// <img src={ icon1 } alt=""/>

// 方法2
// <img src={require("../images/login-from-icon1.png")} />
